<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 一、
            原型对象
                原型：prototype     函数具有的属性
                    我们所创建的每一个函数（不论是普通函数还是构造函数），解析器都会向函数中添加一个属性prototype
                    当函数以普通函数的形式调用prototype时，没有任何作用
                    当函数以构造函数的形式调用prototype时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过__proto__来访问该属性
                __proto__       对象具有的属性
        */

        function Person(name, age, gender) {
            this.name = name;
            this.age = age;
            this.gender = gender; 
        }

        function MyClass() {

        }

        // console.log(Person.prototype);
        var mc1 = new MyClass();
        var mc2 = new MyClass();
        var mc3 = new MyClass();
        console.log(mc1.__proto__ == MyClass.prototype); // true
        console.log(mc2.__proto__ == MyClass.prototype); // true
        console.log(mc3.__proto__ == MyClass.prototype); // true

        // 原型对象就相当于一个公共区域，所有同一个类的实例都可以访问到这个原型对象
        // 我们可以将对象中共有的内容，统一设置到原型对象中

        // 给原型对象添加一个a属性
        MyClass.prototype.a = "123";
        MyClass.prototype.age = 18;
        console.log(mc1.a);
        console.log(mc2.a);
        console.log(mc3.a);

        // 给原型对象添加一个sayHello方法
        MyClass.prototype.sayHello = function() {
            alert("hello");
        }

        // 调用
        // mc3.sayHello();

        // 当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用

        mc2.a = "456";
        console.log(mc2.a);  // 使用自身的a属性

        // 以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中
        // 这样就不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了

        /* 二、 属性的检测:hasOwnProperty()
            
        */ 

        // 使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true
        console.log("age" in mc1);

        // 可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性
        // 使用该方法只有当对象自身中含有属性时，才会返回true
        console.log(mc1.hasOwnProperty("age"));  // false
        console.log(mc2.hasOwnProperty("a"));  // true

        /* 三、toString()方法
            当我们直接在页面中打印一个对象时，事件上是输出的对象的toString()方法的返回值
            如果我们希望在输出对象时不输出[object Object]，可以重写toString()方法
            
        */
       
        var per1 = new Person("孙悟空", 1000, "man");
        var per2 = new Person("猪八戒", 3600, "man");

        console.log(per1);  // Person {name: "孙悟空", age: 1000, gender: "man"}
        console.log(per1.toString());  // [object Object]

        // 重写toString()方法
        per1.toString = function() {
            return "Person[name=" + this.name + ", age=" + this.age + ", gender=" + this.gender + "]";
        }

        console.log(per1); // Person {name: "孙悟空", age: 1000, gender: "man", toString: ƒ}
        console.log(per1.toString()); // Person[name=孙悟空, age=1000, gender=man]

        // 上述只是修改per1对象的toString方法，不会对其他对象产生影响
        // 如果想要所有对象都执行该方法，可以修改Person原型的toString

        console.log(per2.toString()); // [object Object]
        // 修改Person原型的toString
        Person.prototype.toString = function(){
            return "Person[name=" + this.name + ", age=" + this.age + ", gender=" + this.gender + "]";
        }
        console.log(per2.toString()); // Person[name=猪八戒, age=3600, gender=man]
    </script>
</head>
<body>

</body>
</html>